<!DOCTYPE html><html><head><title>13-第十三章  CSS继承 重用 组件化 阿里图标 logo</title><meta charset='utf-8'><link href='https://dn-maxiang.qbox.me/res-min/themes/marxico.css' rel='stylesheet'><style>
.note-content  {font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei', 'WenQuanYi Micro Hei', SimSun, Song, sans-serif;}

</style></head><body><div id='preview-contents' class='note-content'>
                        
                    



<h1 id="13-第十三章-css继承-重用-组件化-阿里图标-logo">13-第十三章  CSS继承 重用 组件化 阿里图标 logo</h1>

<p></p>

<hr>



<h2 id="一css继承">一、CSS继承</h2>

<blockquote>
  <p>CSS继承指的是，特定的CSS属性向下传递到子孙元素</p>
</blockquote>

<p>1、默认继承的有：</p>

<blockquote>
  <ul><li>color</li>
  <li>font:small-caps italic bold 50px/100px ‘microsoft yahei’;</li>
  <li>text-align</li>
  <li>text-indent:</li>
  <li>letter-spacing</li>
  <li>word-spacing</li>
  <li>list-style—-只继承ul <br>
      ……</li>
  </ul>
</blockquote>

<p>2、a 标签的color值不继承 <br>
3、默认不继承的给属性加inherit值</p>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs scss"><div class="hljs-line"><span class="hljs-comment line-number">1.</span><span class="hljs-attribute">background</span>:inherit;
</div></code></pre>

<hr>



<h2 id="二-css重用">二、 css重用</h2>

<p>一个代码多次利用,通过添加特定的class类来实现</p>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs css"><div class="hljs-line"><span class="hljs-comment line-number">1.</span><span class="hljs-selector-class">.fL</span>{<span class="hljs-attribute">float</span>:left;}
</div><div class="hljs-line"><span class="hljs-comment line-number">2.</span><span class="hljs-selector-class">.fR</span>{<span class="hljs-attribute">float</span>:right}    
</div></code></pre>

<hr>



<h2 id="三-css组件化开发">三、 css组件化开发</h2>

<blockquote>
  <p>网页中不同功能模块，写入不同的css文件</p>
</blockquote>

<hr>



<h2 id="四阿里图标">四、阿里图标</h2>



<h4 id="一下载阿里字体图标">一，下载阿里字体图标</h4>

<p>1、找到阿里图标官网</p>

<blockquote>
  <ul><li>打开百度搜索   ‘ 阿里图标‘</li>
  <li>点击进去会进入 阿里图标首页地址：<a href="http://www.iconfont.cn/plus" target="_blank">http://www.iconfont.cn/plus</a></li>
  <li>注册一个账号，方便后面的图标统一管理</li>
  <li>找到导航栏中的 —图标库—下方的—官方图标库，这里有很多官方的图标</li>
  </ul>
</blockquote>

<p>2、下载（以天猫图标为例）</p>

<blockquote>
  <ul><li>在页面中找到 –天猫图标库–</li>
  <li>找到需要的图标，鼠标滑入有–添加入库–选项,如此依次操作</li>
  <li>都添加好后，在顶部导航栏找到—购物车图标—点击</li>
  <li>如果 选中下面的—添加到项目–可以保存起来，方便下次再用，也可以实现与你之前的图标合并，</li>
  <li>如果 选中 —下载—就直接下载了</li>
  </ul>
</blockquote>

<hr>



<h4 id="二阿里图标使用">二，阿里图标使用</h4>

<p>1、下载解压后，会可以看到下面的文件</p>



<p><img longdesc="./1515246598692.png" alt="Alt text" title="" type="image/png" class="" src=""></p>

<p>2、把图中全选，在我们项目的文件夹新建一个iconfont文件夹，然后黏贴在里面 <br>
3、使用在项目中使用link标签引入iconfont中的 iconfont.css：</p>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs flix"><div class="hljs-line"><span class="hljs-comment line-number">1.</span>&lt;link <span class="hljs-keyword">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-keyword">type</span>=<span class="hljs-string">"text/css"</span> href=<span class="hljs-string">"./iconfont.css"</span>&gt;
</div></code></pre>

<p>4、在需要使用阿里图标的 class中添加iconfont 类名：</p>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs javascript"><div class="hljs-line"><span class="hljs-comment line-number">1.</span>&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span>
</div></code></pre>

<p>5、点击demo_fontclass.html文档，在浏览器中打开</p>



<p><img longdesc="./1515246785300.png" alt="Alt text" title="" type="image/png" class="" src=""> <br>
6、找到需要的图标，复制下面的icon-xxx名字到<i class="iconfont icon-xxx"></i>作为标签的类型，这样图标就OK了</p>



<p><img longdesc="./1515246801687.png" alt="Alt text" title="" type="image/png" class="" src=""></p>

<hr>



<h2 id="五ico网站logo">五、ico网站logo</h2>

<p>1.首先得有一个.ico 作为扩展名 文件 <br>
2通过<code>&lt;link rel="icon" href="url路径"  type="image/x-icon"&gt;</code>引入即可，具体如下：</p>



<pre class="prettyprint with-line-number hljs-dark"><code class="hljs flix"><div class="hljs-line"><span class="hljs-comment line-number">1.</span>&lt;link <span class="hljs-keyword">rel</span>=<span class="hljs-string">"shortcut icon"</span> href=<span class="hljs-string">"/dir/favicon.ico"</span>  <span class="hljs-keyword">type</span>=<span class="hljs-string">"image/x-icon"</span>&gt;
</div></code></pre></div></body></html>